<template>
  <div class="showMoreWrapper">
    <ul>
      <li v-for="(item, index) in arr" :key="index" @click="click(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { IArrPo } from './const'
@Component({})
export default class ShowMore extends Vue {
  private arr: IArrPo[] = [
    {
      name: '私信',
      fn: 'directMessage',
    },
    {
      name: '关注',
      fn: 'follow',
    },
    {
      name: '邀请',
      fn: 'invite',
    },
    {
      name: '移除',
      fn: 'remove',
    },
    {
      name: '举报',
      fn: 'report',
    },
  ]

  private click(item: IArrPo) {
    if (item.fn === 'directMessage') {
      this.$emit('directMessage', item)
    } else if (item.fn === 'follow') {
      this.$emit('follow', item)
    } else if (item.fn === 'invite') {
      this.$emit('invite', item)
    } else if (item.fn === 'remove') {
      this.$emit('remove', item)
    } else if (item.fn === 'report') {
      this.$emit('report', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.showMoreWrapper {
  position: absolute;
  top: 25px;
  right: 0;
  z-index: 100;
  background-color: #1c1d26;
  box-shadow: 0 2px 20px rgb(0 0 0 / 50%);
  ul {
    list-style: none;
    li {
      cursor: pointer;
      width: 120px;
      height: 35px;
      text-indent: 10px;
      line-height: 35px;
      border-bottom: 1px solid #2a292e;
      color: #ffffff;
    }
  }
}
</style>